<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS选择器</title>

    <style>
      /* 元素选择器 */
      h2 {
        color: aqua;
      }

      /* 类选择器 */
      h3 {
        background-color: tomato;
      }
      .highlight {
        background-color: yellow;
      }

      /* ID选择器 */
      h4 {
        color: green;
      }
      #header {
        color: blue;
      }

      /* 通用选择器 */
      * {
        font-family: "KaiTi";
      }
    </style>
  </head>
  <body>
    <h1>这是不同类型的CSS选择器</h1>

    <h2>这是一个元素选择器示例</h2>

    <h3>这是一个类选择器示例</h3>
    <h3 class="highlight">这是一个类选择器示例</h3>

    <h4>这是一个ID选择器示例</h4>
    <h4 id="header">这是一个ID选择器示例</h4>
  </body>
</html>
